<template>
    <div style="margin-top:30px;">
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="所属机构" prop="groupCode" style="margin-right:15px">
              <el-select v-model="form.groupCode" placeholder="请选择机构" clearable style="width: 100%">
                <el-option
                  v-for="item in partyGroup"
                  :key="item.code"
                  :label="item.groupName"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple">
                            <el-form-item label="力别" prop="name"  style="margin-right:15px">
                                <el-input v-model="form.name" placeholder="请输入力别" />
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple">
                            <el-form-item label="记件单价" prop="unitPrice"  style="margin-right:15px">
                                <el-input v-model="form.unitPrice" placeholder="请输入记件单价" />
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple">
                            <el-form-item label="备注" prop="remarks"  style="margin-right:15px">
                                <el-input v-model="form.remarks" placeholder="请输入备注" />
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="funcCancel">取 消</el-button>
            <el-button type="primary" @click="funcSubmit" :disabled="isDisable">确 定</el-button>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue'
    import 'xe-utils'
    import VXETable from 'vxe-table'
    import 'vxe-table/lib/index.css'
    import request from '@/utils/request'
    Vue.use(VXETable)
    export default {
        name: 'forceTypeEdit',
        data() {
            return {
                isDisable:false,

                emptyForm:{},
                form: {
                    code: '',
                    name: '',
                    unitPrice: '',
                    remarks: '',
                    status: '',
                    groupCode: '',
                    partyGroupCode:'',

                },
                    partyGroup:[],

                rules: {
                  groupCode: [
                        { required: true, message: '请选择所属机构', trigger: 'blur' }
                    ],

                    code: [
                        { required: true, message: '请输入编码', trigger: 'blur' },

                    ],
                    name: [
                        { required: true, message: '请输入力别', trigger: 'blur' },

                    ],
                    unitPrice: [
                        { required: true, message: '请输入记件单价', trigger: 'blur' },
                    ],
                }
            }
        },
        created() {
            //保存空表单对象
            this.emptyForm =JSON.parse(JSON.stringify(this.form))
        },
        methods: {
            // 获取页面信息
            getInfo(code) {
                //查询到数据之前先展示空表单
                this.form=JSON.parse(JSON.stringify(this.emptyForm))
                request({ url: `/ntocc-wms-api/forceType/${code}`, method: 'get' }).then(response => {
                    this.form = response.data
                })
            },
            // 提交
            funcSubmit() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.isDisable = true

                        const data = this.form
                        request({ url: '/ntocc-wms-api/forceType', method: 'put', params: data }).then(response => {
                            this.$message({ message: response.msg, type: 'success' })
                            this.$emit('fatherEditMethod')
                            this.isDisable = false

                        }).catch(() => this.isDisable = false)
                    } else {
                        return false;
            }
            });
            },
            // 取消
            funcCancel() {
                this.$emit('fatherCancelMethod', 'edit')
            }

        }
    }
</script>
<style lang="scss" scoped>
    .dialog-footer {
        margin:15px 0 15px 0;
        width: 175px;
        float: right;
    }
</style>
